<template>
	<view class="page">
		<!-- <view class="page-ware_tabBox">
			<view class="page-ware_item" v-for="(item,index) in tabList">
				<image :src="item.img" mode="" class="page-ware_item-img"></image>
				<view class="page-ware_item-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="deliver-query">
			<view class="deliver-time" ontap="showPopup">
				<picker mode="date" :value="startDeta" :start="startTime" :end="endTime" @change="startDateChange">
					<view class="picker">
						{{startDeta}}
					</view>
				</picker>
				<image src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx; padding-left: 15rpx;"
					@click="cassa('startDeta')" v-if="startDeta !='开始时间'"></image>
			</view>
			<view class="line">—</view>
			<view class="deliver-time" ontap="showPopup">

				<picker mode="date" :value="endTime" :start="startDeta" :end="endTime" @change="endDateChange">
					<view class="picker">
						{{endDetaL}}
					</view>
				</picker>
				<image src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx; padding-left: 15rpx;"
					@click="cassa('endDetaL')" v-if="endDetaL !='结束时间'"></image>
			</view>
			<button class="queryBut" @click="search">搜索</button>
		</view>
		<view class="teamjiju-box">
			<view class="teamjiju-box-title">
				团队机具
			</view>
			<view class="teamjiju-box-title-number">
				0
			</view>
			<view class="teamjiju-box-jihuobox">

			</view>
		</view> -->
		<view class="page-title">
			<view class="page-title-line">

			</view>
			<view class="page-title-text">
				机具统计
			</view>
		</view>
		<view class="tab-box">
			<view v-for="(item, index)  in storeList" :key="index" :class="[type==item.id?'sel':'nosel']"
				@click="typeofs(item)">
				<!-- class="scrollx_item" -->
				<view>{{item.name}}</view>
			</view>
		</view>
		<view class="data-box">
			<view class="box">
				<view class="data-box-item">
					<view class="data-box-item-number">
						{{dataOBJ.totalNum}}
					</view>
					<view class="data-box-item-text">
						机具总数
					</view>
				</view>
				<view class="data-box-item">
					<view class="data-box-item-number">
						{{dataOBJ.weijihuo}}
					</view>
					<view class="data-box-item-text">
						机具库存总数
					</view>
				</view>
			</view>
			<view class="box">
				<view class="data-box-item">
					<view class="data-box-item-number">
						{{dataOBJ.jihuo}}
					</view>
					<view class="data-box-item-text">
						已激活机具总数
					</view>
				</view>
				<view class="data-box-item">
					<view class="data-box-item-number">
						{{dataOBJ.weijihuo}}
					</view>
					<view class="data-box-item-text">
						待激活机具总数
					</view>
				</view>
			</view>

		</view>
		<view class="device-list">
			<view class="device-item" v-for="(item,index) in List" @click="toChild(item.type)">
				<image :src="item.img" mode=""></image>
				<view class="text">
					<view class="text_1">
						{{item.text}}
					</view>
					<view class="text_2">
						{{item.texttow}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		data() {
			return {
				tabList: [{
						img: "/static/img/index/ic_ware_tab2.png",
						text: '待划拨'
					},
					{
						img: "/static/img/index/ic_ware_tab3.png",
						text: '已划拨'
					},
					{
						img: "/static/img/index/ic_ware_tab4.png",
						text: '自用机具'
					},
					{
						img: "/static/img/index/ic_ware_tab5.png",
						text: '机具预警'
					}
				],
				List: [{
						img: "/static/img/index/jjlb.png",
						text: '机具列表',
						texttow: '机具数',
						type:'list'
					},
					{
						img: "/static/img/index/xf.png",
						text: '机具划拨',
						texttow: '可划拨',
						type:'equipmentAllocation'
					},
					{
						img: "/static/img/index/jl.png",
						text: '划拨记录', 
						texttow: '划拨记录',
						type:'transferRecord'
					},
					{
						img: "/static/img/index/xs.png",
						text: '入库记录', 
						texttow: '入库记录',
						type:'storeList'
					}
					// ,
					// {
					// 	img: "/static/img/index/xs.png",
					// 	text: '商户登记', 
					// 	texttow: '登记记录',
					// 	type:'equipmentList'
					// }
				],
				startDeta: '开始时间',
				endDetaL: '结束时间',
				storeList: [{
						id: 0,
						name: '汇总'
					},
					{
						id: 1,
						name: '自营'
					},
					{
						id: 2,
						name: '下级'
					}
				],
				type: '0',
				dataOBJ: {
					jihuo: '',
					totalNum: '',
					weijihuo: '',
				},
				teamdata: {},
				usrdata: {}
			}
		},
		onLoad(o) {
			

		},
		onShow() {
this.getterminalindex();
		},
		methods: {
			toChild(t){
				if(t == 'list'){
					uni.navigateTo({
						url:'/pages/myEquipment/eqList'
					})
				}else if(t == 'transferRecord'){
					uni.navigateTo({
						url:'/pages/myEquipment/transferRecordList'
					})
				}else if(t == 'equipmentAllocation'){
					uni.navigateTo({
						url:'/pages/myEquipment/equipmentAllocation'
					})
				}else if(t == 'storeList'){
				
					uni.navigateTo({
						url:'/pages/myEquipment/selectstoreList'
					})
				}
				// else if(t == 'equipmentList'){
				// 	uni.navigateTo({
				// 		url:'/pages/myEquipment/equipmentList'
				// 	})
				// }
				
			},
			// 修改规格
			typeofs(item) {


				if (item.id == 0) {
					this.dataOBJ = this.teamdata
				} else if (item.id == 1) {
					this.dataOBJ = this.usrdata

				} else if (item.id == 2) {
					this.dataOBJ = {
						jihuo: this.teamdata.jihuo - (this.usrdata.jihuo || 0),
						weijihuo: this.teamdata.weijihuo - (this.usrdata.weijihuo || 0),
						totalNum: this.teamdata.totalNum - (this.usrdata.totalNum || 0)
					};

				}
				this.type = item.id

			},
			cassa(str) {
				if (str == 'startDeta') {
					this.startDeta = "开始时间"
				} else if (str == 'endDetaL') {
					this.endDetaL = "结束时间"
				}
			},
			startDateChange: function(e) {
				this.startDeta = e.detail.value
			},
			endDateChange: function(e) {
				this.endDetaL = e.detail.value
			},

			async getterminalindex() {
				const res = await util.request(
					api.terminalindexUrl, {},
					'GET'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.dataOBJ = res.data.team
					this.teamdata = res.data.team
					this.usrdata = res.data.usr
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #F7F7F7;
	}

	// .page-ware_tabBox {
	// 	border-radius: 5px;
	// 	margin: 5px 15px;
	// 	background-color: #EFEFF1;
	// 	display: flex;
	// 	align-items: center;
	// }

	// .page-ware_item {
	// 	padding: 10px 0px;
	// 	flex: 1;
	// 	text-align: center;

	// }

	// .page-ware_item-img {
	// 	width: 35px;
	// 	height: 35px;
	// 	margin: 0 auto;
	// }

	// .page-ware_item-text {
	// 	margin-top: 6px;
	// 	font-size: 12px;
	// 	color: #000;
	// }

	// .deliver-query {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	overflow: hidden;
	// 	padding: 8px;
	// 	border-radius: 5px;
	// 	margin: 5px 15px;
	// 	background-color: #EFEFF1;
	// }

	// .deliver-time {
	// 	color: #AEAEAE;
	// 	font-size: 26rpx;
	// 	width: 40%;
	// 	height: 62rpx;
	// 	line-height: 62rpx;
	// 	text-align: center;
	// 	background: white;
	// 	display: flex;
	// 	align-items: center;
	// 	border-radius: 10rpx;
	// 	border: 1rpx solid #f5f5ff;
	// }

	// .deliver-time>text {
	// 	padding-left: 10rpx;
	// }

	// .line {
	// 	color: #000;
	// 	font-size: 30rpx;
	// 	padding: 0 20rpx;
	// }

	// .picker {
	// 	padding-left: 15rpx;
	// }

	// .queryBut {
	// 	width: 70px;
	// 	height: 30px;
	// 	border: 1px solid #6A9FFB;

	// 	font-size: 25rpx;
	// 	padding: 0rpx;
	// 	color: #6A9FFB;
	// 	line-height: 30px;
	// 	margin-left: 25rpx;
	// }

	// .queryBut::after {
	// 	border: 0;

	// }

	// .teamjiju-box {
	// 	border-radius: 5px;
	// 	margin: 5px 15px;
	// 	padding: 5px;
	// 	background: linear-gradient(to right, #96BCFD, #6A9FFB);
	// 	color: #fff;
	// }

	// .teamjiju-box-title {
	// 	margin-top: 5px;
	// 	text-align: center;
	// 	font-size: 15px;

	// }

	// .teamjiju-box-title-number {
	// 	margin-top: 5px;
	// 	text-align: center;
	// 	font-size: 16px;
	// 	color: #fff;
	// }

	// .teamjiju-box-jihuobox {
	// 	margin-top: 5px;
	// 	margin-bottom: 10px;

	// }
	.page-title {
		// margin-top: 10px;
		padding-top: 10px;
		margin-left: 15px;
		display: flex;
		align-items: center;
	}

	.page-title-line {
		width: 4px;
		height: 12px;
		background-color: #2F6DFE;
	}

	.page-title-text {
		font-size: 18px;
		font-weight: 600;
		margin-left: 15px;
		color: #000;
	}

	.tab-box {
		margin: 10px 30px;
		display: flex;
		align-items: center;
		// padding: 2px;
		border: solid 1px #2F6DFE;
		border-radius: 10px;
		overflow: hidden;
		text-align: center;
	}

	.sel {
		flex: 1;
		padding: 5px 10px;
		font-size: 16px;
		color: #fff;
		background-color: #2F6DFE;
	}

	.nosel {
		font-size: 16px;
		flex: 1;
		padding: 5px 10px;
		color: #A1A1A1;
	}

	.data-box {
		margin-top: 10px;
		margin-left: 15px;
		margin-right: 15px;
		// height: 300px;
		padding: 10px;
		background-image: url('../../static/img/index/jijubg.png');
		background-size: 100% 100%;
		border-radius: 10px;
		color: #fff;
	}

	.box {
		display: flex;
		align-items: center;
		padding: 15px 20px 0;
		// flex-wrap: wrap;
	}

	.data-box-item {
		// width: 50%;
		flex: 1;

	}

	.data-box-item-number {
		font-weight: 700;
	}

	.data-box-item-text {
		font-weight: 400;
		margin-top: 5px;
	}

	.device-list {
		// margin: .2rem .26rem .6rem;
		margin: 20px 15px 60px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.device-item {
		width: 48%;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		background: #fff;
		padding: 20px 16px;
		border-radius: 10px;
		margin-bottom: 10px;

		image {
			width: 32px;
			height: 32px;
			margin-right: 16px;
		}

		.text {
			.text_1 {
				font-size: 15px;
				font-weight: 600;
			}

			.text_2 {
				font-size: 15px;
				color: #999;
			}
		}
	}
</style>